Учебник по основам CSS для начинающих 2015

Урок 0. Введение:
Видеокурс по CSS для начинающих верстальщиков от компании WebForMySelf.
При верстке веб-страниц HTML отвечает за разметку страницы, то есть за ее построение. А за оформление страницы, то есть за ее дизайн и внешний вид, отвечает CSS. Используя css свойства и их значения, мы назначаем шрифт, размер текста и его начертания, указываем фоновые цвета либо изображения для блоков, назначаем внешний вид границ элементов, их размеры и отступы, управляем видимостью блоков и их позиционированием, и многое-многое другое, что связано с оформлением внешнего вида страницы.
В учебнике по основам CSS для начинающих мы с вами будем изучать css свойства и их значения.
СSS свойств достаточно много и еще больше у них значений. Но особенностью данного курса является то, что мы не будем в нем рассматривать детально все css свойства. Поверьте, мне за почти 10-летний опыт разработки некоторые из них приходилось использовать всего несколько раз, а некоторые в реальных проектах вообще ни разу. Поэтому я не вижу смысла подробно рассматривать все свойства со всеми значениями, некоторые из которых вы, возможно, никогда не примените.
В учебнике по основам CSS для начинающих мы подробно рассмотрим необходимые для создания сайтов css свойства. Изученных свойств вам будет вполне достаточно для создания сайтов практически любой сложности, и при этом количество свойств будет приемлемо для качественного усвоения и запоминания. В курсе предусмотрены задания для самостоятельного выполнения, что помогает лучше освоить css на практике.
Вот разделы css, которые мы рассмотрим в учебнике по основам CSS для начинающих: способы подключения css к странице и назначения классов, оформление текста, свойства фона, размеры и отступы, границы элементов, плавающие блоки, позиционирование и видимость блоков.


Урок 1. Способы подключения:
От автора: как мы уже с вами знаем, за внешний вид страницы отвечает css. И для того, чтобы назначать стили для страницы необходимо либо подключить стили css к странице, либо встроить их в страницу. О том, как это можно сделать, какие есть способы подключения стилей к странице, достоинства и недостатки каждого способа, а так же все нюансы, связанные с приоритетом способов подключения, мы с вами разберем в данном уроке.
По результатам урока Вы научитесь подключать всеми возможными способами css к вашей html странице. Будете ориентироваться в каждом из способов и выберете лучший из них для вашей верстки.


Урок 2. Назначение классов и id:
От автора: для того, чтобы назначить стили для какого-либо блока на странице, необходимо ему назначить класс или id, и затем в css перечислить все необходимые для данного класса свойства с нужными значениями. В данном уроке мы с вами научимся создавать классы и id, поговорим о том, какие классы бывают, чем отличаются id от классов и что в каких случаях лучше использовать.
По результатам урока Вы научитесь создавать классы и id, сможете назначать нужные для элементов страницы классы.


Урок 3. Свойства шрифта:
От автора: именно за информацией посетители приходят на ваш сайт. И наиболее распространенным способом представления информации на странице является текст. Текст должен быть хорошо читаемым, при чтении длинных текстов не должно снижаться внимание и восприимчивость текста. Это все достигается путем правильного оформления текста, подбора шрифта, выделения заголовков и т.д. В данном уроке мы с вами начнем изучать свойства, которые оформляют текст.
По результатам урока Вы сможете назначать шрифты, начертания шрифта, а так же размер текста для ваших страниц.


Урок 4. Свойства текста:
От автора: в данном уроке мы с вами продолжим изучать свойства, которые оформляют текст на странице. Кроме шрифта, его размеров и начертания можно назначать для текста выравнивание, межстрочный интервал. Текст можно делать перечеркнутым или подчеркнутым, что используется в ссылках. Все это и многое другое мы с вами научимся делать, изучив данный урок.
По результатам урока Вы сможете указывать межстрочный интервал для текстов вашей страницы, выравнивать текст так, как вам нужно и назначать любое оформления для текста на ваших страницах.


Урок 5. Фон:
От автора: фон играет очень большое значение на большинстве сайтов. Задавая фоновый цвет, фоновые градиенты или фоновые изображения оформляется и описывается дизайн веб-страниц. Фоновые изображения можно позиционировать, они могут повторяться, при чем могут повторяться как по вертикали, так и по горизонтали. Устанавливая фоном для различных блоков хорошо нарезанные изображения, можно добиться интересных эффектов на странице. В данном уроке мы рассмотрим все свойства, необходимые для работы с фоном.
По результатам урока Вы научитесь устанавливать фоновые изображения к вашим страницам либо блокам на страницах.


Урок 6. Ширина, высота. Тег Div и Span:
От автора: как мы уже знаем, классы задаются тегам. Но при верстке веб-страниц постоянно возникает необходимость оформить или как-то выделить несколько элементов или выделить несколько слов в предложении, которые не находятся ни в каком теге. В данном случае нам могут помочь теги div и span. О том, что это за теги, как и в каких случаях их нужно использовать, мы с вами поговорим в данном уроке.
По результатам урока Вы сможете назначать стили для участков страницы не выделенных никакими тегами.


Урок 7. Рамка:
От автора: задавая border, мы можем выделить границу блока. Так же есть возможность выделять не всю границу, только одну из сторон блока: нижнюю, верхнюю, левую или правую. Очень часто граница используется в дизайне, при оформлении внешнего вида страниц, как разделитель. Например, указав для блока нижнюю границу, можно отделить друг от друга вертикально идущие блоки. А задавая левую границу, можно визуально разделить блоки, стоящие в одном ряду. В данном уроке мы с вами рассмотрим все, что касается границ элемента.
По результатам урока Вы сможете назначать любые границы для блоков, назначать толщину рамки и менять ее вид.


Урок 8. Отступы:
От автора: практически на каждой странице, практически для каждого блока задаются отступы. Для того, чтобы сайт выглядел хорошо и им можно было удобно пользоваться, все логические блоки на странице находятся друг от друга на определенном расстоянии, между абзацами, между заголовками так же присутствует свободное пространство. Достигается это путем задания отступов для блока. Отступы могут быть внутренние и внешние. Обо всем этом мы поговорим в данном уроке.
По результатам урока Вы сможете задавать любые отступы для блоков вашего сайта.


Урок 9. Основы CSS. Float, Clear, Display:
От автора: итак, мы продолжаем цикл уроков «Основы CSS». Как вы уже успели заметить, все блоки на странице располагаются друг под другом. И чтобы «заставить» размещаться блоки в один ряд, нам может помочь свойство float. Область применения данного свойства очень широка: горизонтальные меню, двухколоночные, трехколоночные макеты сайтов можно создавать, используя float. В данном уроке мы рассмотрим все, что связанно с float, а так же рассмотрим свойство display, которое позволяет управлять видимостью блоков и способом их отображения на странице.
По результатам урока Вы научитесь использовать свойство display и плавающие блоки при создании веб-страниц.


Урок 10. Основы CSS. Свойство position:
От автора: мы продолжаем цикл уроков «Основы CSS верстки» для начинающих. В уроке по основам CSS: position рассмотрим еще одно css свойство, которое приходится использовать при верстке страниц достаточно часто – это position. Данное свойство управляет позиционированием блоков на странице. Очень часто используется при центрировании блоков, или, например, в случаях, когда необходимо расположить какой-либо блок в правом нижнем углу другого блока, независимо от его размеров и содержимого. В этом уроке мы с вами подробно разберем свойство position.
По результатам урока Вы научитесь использовать свойство CSS position, пользоваться позиционированием и сможете правильно его применять при верстке страниц.